ANDROID | 使用Fragment兼容平板与手机

发表于 | 分类于 |

界面效果

在手机设备上，由于采用单窗格用户界面，因此可能更适合一次只显示一个片段。 相反，由于平板电脑屏幕尺寸较大，可以为用户显示更多信息，因此最好将片段设计为并排显示。

布局文件

小屏布局文件，如手机

res/layout/news_articles.xml:

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

大屏布局文件，如平板电脑

res/layout-large/news_articles.xml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <fragment android:name="com.king.demo.fragment.HeadlinesFragment"
        android:id="@+id/headlines_fragment"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent" />
    <fragment android:name="com.king.demo.fragment.ArticleFragment"
        android:id="@+id/article_fragment"
        android:layout_weight="2"
        android:layout_width="0dp"
        android:layout_height="match_parent" />
</LinearLayout>

判断加载哪个布局文件

当设备屏幕尺寸小于large时加载第一个布局文件，否则加载第二个布局文件，是否large则由系统判断，而我们可以通过以下方法判断加载的是哪个布局：

1
2
3
4
5
6
7
8
if (findViewById(R.id.fragment_container) != null) {
    // 此处加载了第一个布局文件
}
ArticleFragment articleFrag = (ArticleFragment) getSupportFragmentManager().findFragmentById(R.id.article_fragment);
if (articleFrag != null) {
    // 此处加载了第二个布局
}

片段处理

FragmentManager类提供的方法让您可以在运行时为 Activity 添加、移除和替换片段，从而营造出动态的用户体验。

在运行时为 Activity 添加片段

在您的 Activity 内，使用 Support Library API 调用 getSupportFragmentManager() 以获取 FragmentManager。然后，调用 beginTransaction() 创建一个 FragmentTransaction，并调用 add() 添加一个片段。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import android.support.v4.app.FragmentActivity;
import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;
import com.king.demo.R;
public class DynamicFragmentsActivity extends FragmentActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.news_articles);
        // Check whether the activity is using the layout version with
        // the fragment_container FrameLayout. If so, we must add the first fragment
        if (findViewById(R.id.fragment_container) != null) {
            // However, if we're being restored from a previous state,
            // then we don't need to do anything and should return or else
            // we could end up with overlapping fragments.
            if (savedInstanceState != null) {
                return;
            }
            // Create an instance of ExampleFragment
            HeadlinesFragment firstFragment = new HeadlinesFragment();
            // In case this activity was started with special instructions from an Intent,
            // pass the Intent's extras to the fragment as arguments
            firstFragment.setArguments(getIntent().getExtras());
            // Add the fragment to the 'fragment_container' FrameLayout
            getSupportFragmentManager().beginTransaction()
                    .add(R.id.fragment_container, firstFragment).commit();
        }
    }
}

替换片段

替换片段的步骤与添加片段类似，只不过调用的方法从 add() 改为 replace()。
请谨记，当您执行替换或移除片段等片段事务时，通常最好让用户能够回退并“撤消”更改。 要让用户回退所执行的片段事务，您必须先调用 addToBackStack()，然后再提交 FragmentTransaction。
片段替换示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// Capture the article fragment from the activity layout
ArticleFragment articleFrag = (ArticleFragment)
        getSupportFragmentManager().findFragmentById(R.id.article_fragment);
if (articleFrag != null) {
    // If article frag is available, we're in two-pane layout...
    // Call a method in the ArticleFragment to update its content
    articleFrag.updateArticleView(position);
} else {
    // If the frag is not available, we're in the one-pane layout and must swap frags...
    // Create fragment and give it an argument for the selected article
    ArticleFragment newFragment = new ArticleFragment();
    Bundle args = new Bundle();
    args.putInt(ArticleFragment.ARG_POSITION, position);
    newFragment.setArguments(args);
    FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
    // Replace whatever is in the fragment_container view with this fragment,
    // and add the transaction to the back stack so the user can navigate back
    transaction.replace(R.id.fragment_container, newFragment);
    transaction.addToBackStack(null);
    // Commit the transaction
    transaction.commit();
}

片段通信

通常您希望一个片段与另一个片段进行通信，例如根据用户事件更改内容。所有片段到片段的通信是通过Activity完成的。两个片段不应该直接交流。若要允许片段与其Activity进行通信，您可以在片段类中定义接口并在Activity中实现它。片段捕捉接口实现其onattach()生命周期方法中可以调用接口的方法以进行交流活动。

1、声明接口

在HeadlinesFragment声明接口OnHeadlineSelectedListener：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
public class HeadlinesFragment extends ListFragment {
    OnHeadlineSelectedListener mCallback;
    // Container Activity must implement this interface
    public interface OnHeadlineSelectedListener {
        public void onArticleSelected(int position);
    }
    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
        // This makes sure that the container activity has implemented
        // the callback interface. If not, it throws an exception
        try {
            mCallback = (OnHeadlineSelectedListener) activity;
        } catch (ClassCastException e) {
            throw new ClassCastException(activity.toString()
                    + " must implement OnHeadlineSelectedListener");
        }
    }
    ...
}

2、实现接口

在DynamicFragmentsActivity中实现接口：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
public static class DynamicFragmentsActivity extends Activity
        implements HeadlinesFragment.OnHeadlineSelectedListener{
    ...
    public void onArticleSelected(int position) {
        // The user selected the headline of an article from the HeadlinesFragment
        // Do something here to display that article
        ArticleFragment articleFrag = (ArticleFragment)
                getSupportFragmentManager().findFragmentById(R.id.article_fragment);
        if (articleFrag != null) {
            // If article frag is available, we're in two-pane layout...
            // Call a method in the ArticleFragment to update its content
            articleFrag.updateArticleView(position);
        } else {
            // Otherwise, we're in the one-pane layout and must swap frags...
            // Create fragment and give it an argument for the selected article
            ArticleFragment newFragment = new ArticleFragment();
            Bundle args = new Bundle();
            args.putInt(ArticleFragment.ARG_POSITION, position);
            newFragment.setArguments(args);
            FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
            // Replace whatever is in the fragment_container view with this fragment,
            // and add the transaction to the back stack so the user can navigate back
            transaction.replace(R.id.fragment_container, newFragment);
            transaction.addToBackStack(null);
            // Commit the transaction
            transaction.commit();
        }
    }
}

3、回调

在HeadlinesFragment回调接口中的方法：

1
2
3
4
5
6
7
8
9
10
11
public class HeadlinesFragment extends ListFragment {
    OnHeadlineSelectedListener mCallback;
    ...
    @Override
    public void onListItemClick(ListView l, View v, int position, long id) {
        // Notify the parent activity of selected item
        mCallback.onArticleSelected(position);
    }
}

参考文档链接
全部源码链接